<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>飞机人打怪</title>
  <style>
    body {

      padding: 0px;
      margin: 0px;
      font-family: "微软雅黑";

    }

    #main {
      /*border: 1px solid red;*/
      width: 400px;
      height: 600px;
      background-image: url("image/background_2.png");
      margin-left: 500px;
      position: absolute;
      overflow: hidden;
    }

    #titleSorce {
      font: bolder 30px "微软雅黑";

    }

    #title {
      margin-top: 150px;
      margin-left: 100px;
      -webkit-animation: fontChange 5s infinite linear;
      -webkit-transition: all 1s linear;
    }

    .mybtn {
      /*border: 1px solid red;*/
      width: 150px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: #dcdcdc;
      border-radius: 15px;
      margin-bottom: 25px;
      margin-left: 130px;
      color: gray;
      cursor: pointer;
    }

    #stopGame {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      text-align: center;
      line-height: 30px;
      border: 3px solid gray;
      color: gray;
      float: right;
      margin-right: 10px;
      margin-top: 10px;
      cursor: pointer;
      display: none;
    }

    #stopUI {
      border: 1px solid red;
      width: 1345px;
      height: 645px;
      position: absolute;
      left: 0px;
      top: 0px;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;

    }

    #stopUI .mybtn {
      position: relative;
      left: 500px;
      top: 250px;
    }

    @-webkit-keyframes fontChange {
      0% {
        color: #ffae62;
      }
      25% {
        color: #FF8E95;
      }
      50% {
        color: #FFC4E8;
      }
      100% {
        color: aqua;
      }
    }
  </style>
</head>
<body onkeydown="playerMoveStateTrue()" onkeyup="playerMoveStateFalse()">
<div id="main" style="height:600px;">
  <div id="stopGame" onclick="stopGameOver()">||</div>
  <div id="titleSorce">
    <div>杀敌:</div>
    <div>总分:</div>
  </div>
  <div id="title"><h1>一起来打飞机吧</h1></div>
  <div id="btn1" class="mybtn" onclick="StartGame()">Start Game</div>
  <div id="btn2" class="mybtn" onclick="closeGame()">Exit</div>
</div>
<script>
  var smallPlaneList = new Array(); //创建一个全局变量，装所有小飞机
  var player;//创建玩家飞机
  // 添加4个变量分别控制四个按键。false代表没有按下，true代表按下
  var leftState = false;
  var rightState = false;
  var topState = false;
  var downState = false;
  //4.创建子弹状态
  var shotState = false;

  //3.创建子弹数组
  var bulletList = new Array();
  //17.
  var mainObj = document.getElementById("main");


  function StartGame() {
    var titleObj = document.getElementById("title");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    //以上三句语句获取到首页三个内容的id
    titleObj.style.display = "none";
    btn1.style.display = "none";
    btn2.style.display = "none";
    //以上三句语句是让首页的三个内容消失
    window.setInterval(createSmallPlane, 1000);//小飞机调用，每300毫秒创建一架飞机
    setInterval(smallPlaneMove, 200);//每一百毫秒移动一次
    //11.新加入实参传值
    player = new playerPlan("image/my-plane.gif", 66, 82);
    setInterval(playMove, 10);//10毫秒捕捉一次用户控制
    //4.加入初始化内容，创建子弹s
    setInterval(bulletMove, 1);
    //22 已进入游戏，碰撞函数就要调用
    setInterval(bulletAndPlane, 10);

  }

  //21创建碰撞函数
  function bulletAndPlane() {
    //23 敌机和我方子弹碰撞
    for (var i = 0; i < smallPlaneList.length; i++) {
      //获取敌方飞机坐标
      var xStart = parseInt(smallPlaneList[i].imageNode.style.left);
      var yStart = parseInt(smallPlaneList[i].imageNode.style.top);
      var xEnd = xStart + parseInt(smallPlaneList[i].imgWidth);
      var yEnd = yStart + parseInt(smallPlaneList[i].imgHeight);
      for (var j = 0; j < bulletList.length; j++) {
        //获取子弹的坐标
        var bulletX = parseInt(bulletList[j].imageNode.style.left);
        var bulletY = parseInt(bulletList[j].imageNode.style.top);
        if (smallPlaneList[i].isDie==false&&bulletList[j].isDie==false&&bulletX>xStart-bulletList[j].imgWidth&&bulletX<=xEnd&&bulletY>=yStart&&bulletY<=yEnd) {
          console.log("打中了！!");
          smallPlaneList[i].imageNode.src = "image/smallplan.gif";
          smallPlaneList[i].isDie = true;
          bulletList[j].isDie=true;
        }
      }
    }
  }

  //7.创建子弹移动方法
  function bulletMove() {
    for (var i = bulletList.length - 1; i >= 0; i--) {
      bulletList[i].move();
      //18.删除所有超出界限的子弹
      if (parseInt(bulletList[i].imageNode.style.top) < 0) {
        mainObj.removeChild(bulletList[i].imageNode);
        bulletList.splice(i, 1);
      }
    }
  }
  //玩家飞机移动函数
  function playMove() {
    if (leftState == true) {
      player.leftMove();
    }
    if (rightState == true) {
      player.rightMove();
    }
    if (topState == true) {
      player.topMove();
    }
    if (downState == true) {
      player.downMove();
    }
    //5.设置子弹发射状态
    if (shotState == true) {
      player.shot();
    }
  }
  function playerMoveStateTrue() {
    var e = window.event || arguments[0];//获取按键对应数值
    console.log(e.keyCode);//在控制台打印出对应按键的数值

    if (e.keyCode == 38) {
      topState = true;
    }
    if (e.keyCode == 39) {
      rightState = true;
    }
    if (e.keyCode == 40) {
      downState = true;
    }
    if (e.keyCode == 37) {
      leftState = true;
    }
//6.使用空格键按下，创建子弹
    if (e.keyCode == 32) {
      shotState = true;
    }
  }
  //创建小飞机
  function createSmallPlane() {
    //飞机地址的调用和传值
    //25 传值小飞机的高度与宽度
    var sp = new smallPlane("image/enemy1_fly_1.png", 34, 24);
    //执行一次初始化过程
    sp.init();
    //每一个小飞机都要加到小飞机数组中
    smallPlaneList.push(sp);
  }
  //飞机的移动操作   动用move方法
  function smallPlaneMove() {
    for (var i = smallPlaneList.length-1; i>=0; i--) {
      //使用全局变量小飞机，所有的飞机均调用move方法
      //smallPlaneList[i].move();
      //27改变飞机死亡状态，死亡不进行飞行
      if (smallPlaneList[i].isDie == false) {
        smallPlaneList[i].move();
      }else{
        smallPlaneList[i].timeDie++;
        if(smallPlaneList[i].timeDie>=10){
          mainObj.removeChild(smallPlaneList[i].imageNode);
        }
      }
    }
  }
  //小飞机初始化（定义）
  function smallPlane(imgSrc, imgWidth, imgHeight) {
    this.imageNode = document.createElement("img");//创建当前飞机图片的节点
    this.imgSrc = imgSrc;//图片路径，传值进来
    this.blood = 10;//预设的血量，假设开局10滴血
    this.speed = parseInt(Math.random() * 10) + 1;//设置飞机的速度，随机1—10
    this.x = parseInt(Math.random() * 380);//以背景图宽度为限制
    this.y = -(parseInt(Math.random() * 70) + 20);//飞机出现位置，为负因为从外面产生
    //24 给小飞机加宽度与高度
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;
    //26加入敌方飞机死亡状态
    this.isDie = false;
    // 加入一个事假。时间到了后小飞机消失
    this.timeDie = 0
//        // 飞机的整体初始化
    this.init = function () {
      this.imageNode.src = this.imgSrc;//初始化节点路径
      this.imageNode.style.position = "absolute";//初始化样式
      this.imageNode.style.left = this.x + "px";
      this.imageNode.style.top = this.y + "px";
      var mainObj = document.getElementById("main");//获取main节点
      mainObj.appendChild(this.imageNode);//把小飞机内容添加到main节点中

    };
    this.move = function () {
      //创建move方法
      this.imageNode.style.top = parseInt(this.imageNode.style.top) + this.speed + "px";
    }
  }
  function playerMoveStateFalse() {
    var e = window.event || arguments[0];//获取按键对应数值
    console.log(e.keyCode);//在控制台打印出对应按键的数值
    if (e.keyCode == 38) {
      topState = false;
    }
    if (e.keyCode == 39) {
      rightState = false;
    }
    if (e.keyCode == 40) {
      downState = false;
    }
    if (e.keyCode == 37) {
      leftState = false;
    }
    if (e.keyCode == 32) {
      shotState = false;
    }
  }
  //      ----------------------------------分割线，玩家飞机
  function playerPlan(imgSrc, imgWidth, imgHeight) {
    this.imageNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = 200;
    this.y = 400;
    this.speed = 5;
    //10.加入玩家飞机的宽度与高度传值,注意形参要添加上
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;
    //15.设置变量，控制发射频率
    this.shotPi = 0;

    this.init = function () {
      this.imageNode.src = this.imgSrc;//初始化节点路径
      this.imageNode.style.position = "absolute";//初始化样式
      this.imageNode.style.left = this.x + "px";
      this.imageNode.style.top = this.y + "px";
      var mainObj = document.getElementById("main");//获取main节点
      mainObj.appendChild(this.imageNode);
    };
    this.leftMove = function () {
      this.imageNode.style.left = parseInt(this.imageNode.style.left) - this.speed + "px";
    };
    this.rightMove = function () {
      this.imageNode.style.left = parseInt(this.imageNode.style.left) + this.speed + "px";
    };
    this.topMove = function () {
      this.imageNode.style.top = parseInt(this.imageNode.style.top) - this.speed + "px";
    };
    this.downMove = function () {
      this.imageNode.style.top = parseInt(this.imageNode.style.top) + this.speed + "px";
    };
    this.shot = function () {
      //2.写入子弹初始化内容，重点是子弹坐标传值
      //射击
      //   var x=parseInt(this.imageNode.style.left);
      //       var y=parseInt(this.imageNode.style.top);
      //13.
//            var b=new bullet("image/bullet1.png",x+this.imgWidth/2,y,6,14);
//            bulletList.push(b);
//          16
      if (this.shotPi == 0) {
        var x = parseInt(this.imageNode.style.left);
        var y = parseInt(this.imageNode.style.top);
        var b = new bullet("image/bullet1.png", x + this.imgWidth / 2, y, 6, 14)
        bulletList.push(b);

      }
      this.shotPi++;
      if (this.shotPi == 20) {
        this.shotPi = 0
      }
    };

    this.init();
  }
  //1.创建子弹
  function bullet(imgSrc, x, y, imgWidth, imgHeight) {
    this.imageNode = document.createElement("img");
    this.imgSrc = imgSrc;
    this.x = x;
    this.y = y;
    //14.
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;

    this.speed = 10;//子弹速度

    //28.子弹死亡状态
    this.isDie = false;

    this.init = function () {
      this.imageNode.src = this.imgSrc;//初始化节点路径
      this.imageNode.style.position = "absolute";//初始化样式
      /*                this.imageNode.style.left = this.x + "px";
       this.imageNode.style.top = this.y + "px";*/
      this.imageNode.style.left = this.x - this.imgWidth / 2 + "px";
      this.imageNode.style.top = this.y - this.imgHeight + "px";
      var mainObj = document.getElementById("main");//获取main节点
      mainObj.appendChild(this.imageNode);//把小飞机内容添加到main节点中
    };
    this.move = function () {
      this.imageNode.style.top = parseInt(this.imageNode.style.top) - this.speed + "px";
    };
    //9.调用初始化方法
    this.init();
  }
</script>
</body>
</html>